<%--
  Created by IntelliJ IDEA.
  User: 123
  Date: 2020/6/4
  Time: 11:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>

<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>Title</title>
    <%@include file="/common/com.jsp"%>
    <style>
        .img{
            width: 200px;
            height: 200px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
<div id="root">
    <Collapse v-model="Pane1">
        <Panel name="Pane1">
           <%-- 多条件查询--%>
            <p slot="content">
                <i-form :label-width="70" inline>
                    <Form-Item label="用户编号:">
                        <i-input v-model="managementVo.userCode"></i-input>
                    </Form-Item>
                    <Form-Item label="用户角色:">
                        <i-Select v-model="managementVo.userRole" remote :remote-method="getRoleList" style="width: 120px">
                            <i-Option :value="''">----请选择----</i-Option>
                            <i-Option v-for="item in rolelist" :value="item.id" :key="item.id">{{item.roleName}}</i-Option>
                        </i-Select>
                    </Form-Item>

                    <i-button type="primary" @click="pageNo=1;getUserList();">搜索</i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>
    <card>
   <shiro:hasPermission name="staff:add">
            <i-button  shape="circle" @click="add"> <Icon type="md-add-circle" /></i-button>
        </shiro:hasPermission>
        <%-- <i-button  shape="circle" @click="add"> <Icon type="md-add-circle" /></i-button>--%>
    </card>
<%--    <i-table :columns="columns" :data="data" Border stripe height="400" @on-selection-change="tableSelect=arguments[0]">--%>
        <i-table :columns="columns" :data="data" border  height="400" stripe @on-selection-change="tableSelect=arguments[0]">
        <template slot-scope="{row,index}" slot="gender">
            {{row.gender==1?"男":"女"}}
        </template>
        <template slot-scope="{row,index}" slot="userlist">
            {{row.posit.roleName}}
        </template>
            <template slot-scope="{row,index}" slot="bmlist">
                {{row.plan.bmName}}
            </template>
        <template slot-scope="{row,index}" slot="attachPath">
            <img :src="row.attachPath" alt="" width="60px">
        </template>
        <template slot-scope="{row,index}" slot="action">
      <shiro:hasPermission name="staff:err">
          <i-Button type="info" size="large" @click="err(row,index)"><Icon type="md-expand" /></i-Button>
                </shiro:hasPermission>

       <shiro:hasPermission name="staff:update">
                    <i-Button type="info" size="large" @click="update(row,index)"><Icon type="md-create" /></i-Button>
                </shiro:hasPermission>
            <shiro:hasPermission name="staff:del">
        <i-Button type="error" size="large" @click="del(row,index)"><Icon type="ios-close-circle" /></i-Button>
    </shiro:hasPermission>
        <shiro:hasPermission name="staff:upload">
                <i-Button type="success" size="large" @click="upload(row)"><Icon type="md-person" /></i-Button>
                </shiro:hasPermission>
           <%-- <shiro:hasPermission name="staff:ly">
                <i-Button type="success" size="large" @click="ly(row,index)">员工留言</i-Button>
            </shiro:hasPermission>--%>
        </template>

    </i-table>
    <Modal v-model="modaladd" title="添加员工" @on-ok="doadd">
        <i-Form :label-width="80">
            <Form-Item label="职位编号:">
                <Input type="text" v-model="staff.userCode" placeholder="请输入职位编号">
            </Form-Item>
            <Form-Item label="员工姓名:">
                <Input type="text" v-model="staff.username" placeholder="请输入员工姓名">
            </Form-Item>
            <Form-Item label="用户密码:">
                <Input type="text" v-model="staff.password" placeholder="请输入加密密码">

            </Form-Item>
            <Form-Item label="员工性别:">
            <Input type="text" v-model="staff.gender" placeholder="员工性别对应得数字">

            </Form-Item>
            <Form-Item label="手机号码:">
                <Input type="text" v-model="staff.phone" placeholder="请输入手机号码">
            </Form-Item>
            <Form-Item label="家庭地址:">
                <Input type="text" v-model="staff.address" placeholder="请输入家庭地址">
            </Form-Item>
            <Form-Item label="用户角色:">
            <%--    <Input type="text" v-model="staff.userRole" placeholder="请输入用户角色" value="请输入数字">--%>
                <i-Select v-model="staff.userRole" remote :remote-method="getRootList" style="width: 140px">
                    <i-Option v-for="item in rolelist" :value="item.id" :key="item.id">{{item.roleName}}</i-Option>
                </i-Select>
            </Form-Item>
            <Form-Item label="创建者:">
                <Input type="text" v-model="staff.createdBy" placeholder="请输入创建人名字">
            </Form-Item>
            <Form-Item label="salt:">
                <Input type="text" v-model="staff.salt" placeholder="请输入qwert">

            </Form-Item>
        </i-Form>
    </Modal>
    <Modal v-model="modalupdate" title="修改员工" @on-ok="doupdate">
        <i-Form :label-width="80">
            <Form-Item label="职位编号:">
                <Input type="text" v-model="staff.userCode" placeholder="请输入职位编号">
            </Form-Item>
            <Form-Item label="员工姓名:">
                <Input type="text" v-model="staff.username" placeholder="请输入员工姓名">
            </Form-Item>
            <Form-Item label="用户密码:">
                <Input type="text" v-model="staff.password" placeholder="请输入加密密码">
            </Form-Item>
            <Form-Item label="员工性别:">
                <Input type="text" v-model="staff.gender" placeholder="1.男  2.女">
            </Form-Item>
            <Form-Item label="手机号码:">
                <Input type="text" v-model="staff.phone" placeholder="请输入手机号码">
            </Form-Item>
            <Form-Item label="家庭地址:">
                <Input type="text" v-model="staff.address" placeholder="请输入家庭地址">
            </Form-Item>
            <Form-Item label="更新人:">
                <Input type="text" v-model="staff.modifyBy" placeholder="请输入职位编号">
            </Form-Item>
            <Form-Item label="用户职位:">
                <i-Select v-model="staff.userRole" remote :remote-method="getRootList" style="width: 140px">
                    <i-Option v-for="item in rolelist" :value="item.id" :key="item.id">{{item.roleName}}</i-Option>
                </i-Select>
            </Form-Item>
        </i-Form>
    </Modal>
    <Modal v-model="modalerr" title="查询所有" @on-ok="doerr">
       <div>
           <Card :bordered="false">
               <h3>职位编号:{{staff.userCode}}</h3>
               <h3>用户名称:{{staff.username}}</h3>
               <h3>用户性别:{{staff.gender}}</h3>
               <h3>用户密码:{{staff.password}}</h3>
               <h3>出生日期:{{staff.birthday}}</h3>
               <h3>手机号码:{{staff.phone}}</h3>
               <h3>家庭地址:{{staff.address}}</h3>
               <h3>创建者:{{staff.createdBy}}</h3>
               <h3>创建时间:{{staff.creationDate}}</h3>
               <h3>更新者:{{staff.modifyBy}}</h3>

               <h3>更新时间:{{staff.modifyDate}}</h3>

           </Card>
       </div>
    </Modal>
    <%--文件上传   start--%>
    <modal v-model="uploadFlag" title="上传工作照" @on-ok="uploadAttach">
        <i-form :label-width="80">
            <form-item label="工作照:">
                <%--  :multiple="true"   可多选--%>
                <Upload action="sal/staff/upload" name="attach" :before-upload="handlerBeforeUpload" :multiple="false" :on-success="uploadSuccess">
                    <i-Button icon="ios-cloud-upload-outline">上传工作照</i-Button>
                </Upload>
                <div class="img" :style="{'background-image':'url(' + img +')'}" v-if="img"></div>
            </form-item>
            <form-item label="照片描述: ">
                <i-input type="textarea" v-model="uploadForm.attachDescr"/>
            </form-item>
        </i-form>
    </modal>
    <%--文件上传  end--%>

    <template>
        <Page :total="total"
              show-total
              show-elevator
              :page-size="pageSize"
              :current.sync="pageNo"
              style="margin-left: 0px"
              show-sizer
              :page-size-opts="[5,10,15,20]"
              @on-page-size-change="pageSize=arguments[0];getUserList();"
              @on-change="getUserList"/>


    </template>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                {
                    type:'selection',
                    width: 80,
                    align:'center'
                },
                {title:"用户编码",key:"userCode"},
                {title:"用户名称",key:"username"},
                {title:"用户性别",slot:"gender"},
                {title:"手机号码",key:"phone"},
                {title:"家庭地址",key:"address"},
                {title:"用户角色",slot:"userlist"},
                {title:"创建时间",key:"creationDate"},
                {title:"用户证件",slot:"attachPath"},
                {title:"操作",slot:"action",width:170}

            ],
            data:[],
            staff:{},
            managementVo:{},
            rolelist:{},
            planlist:{},
            total:50,
            pageSize:5,
            pageNo:1,
            modaladd:false,
            modalupdate:false,
            modalerr:false,
            uploadFlag:false,
            img:null,
            uploadForm:{
                id:null,
                attachDescr:null,
                attachPath:null
            },

        },
        mounted(){
            this.getUserList();
            this.getRoleList();
        },
        methods:{
          getUserList(){
              axios.get(`${apath}/sal/staff/list/${this.pageSize}/${this.pageNo}`,{params:this.managementVo})
              .then(({data})=>{
                  this.data=data.result.record;
                  this.total=data.result.total;
              })
          },
            getRoleList(){
                axios.get(`${apath}/sal/posit/list`)
                    .then(({data})=>{
                        this.rolelist=data.result;
                    })
            },
            add(){
                this.staff={},
                    this.modaladd=true;
            },
            doadd(){
              axios.post(`${apath}/sal/staff/add`,this.staff)
                .then(({data})=>{
                    iview.Message.success({content:data.msg})
                    this.getUserList();
                })
                },
            update(row,index) {
                this.staff = row;
                this.modalupdate = true;
            },
            doupdate(){
                let params=Qs.stringify(this.staff,{serializeDate:(data)=>{
                        return moment(data).format("YYYY-MM-DD HH:mm");
                    }});
                axios.post(`${apath}/sal/staff/update`,Qs.parse(params))
                    .then(({data})=>{
                        iview.Message.success({content:data.msg})
                        this.getUserList()
                    })
            },
            del(row,index){
                let _this =this;
                iview.Modal.confirm({
                    title:"确实要删除此部门？",
                    content:"此操作不可逆，请考虑清楚",
                    onOk(){
                        axios.get(`${apath}/sal/staff/del/${row.id}`)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg})
                                _this.getUserList()
                            })
                    }
                })
            },
            err(row,index){
                this.staff = row;
                this.modalerr=true;
            },
            doerr(){
                let params=Qs.stringify(this.staff,{serializeDate:(data)=>{
                        return moment(data).format("YYYY-MM-DD HH:mm");
                    }});
                axios.get(`${apath}/sal/staff/err/${row.id}`,Qs.parse(params))
                    .then(({data})=>{
                        iview.Message.success({content:data.msg})
                        this.getUserList();
                    })
            },
            upload(row){
                this.uploadFlag=true;
                this.uploadForm.id=row.id;
            },
            handlerBeforeUpload(file){
                console.log(file);
                const ct =new FileReader();
                ct.readAsDataURL(file);//读取本地文件
                ct.onloadend=()=>{
                    this.img=ct.result;
                }
            },
            uploadSuccess(response){
                console.log(response);
                iview.Message.success("上传成功");
                this.uploadForm.attachPath=response.result.attachPath;
            },
            uploadAttach(){
                axios.post(`${apath}/sal/staff/uploadAttach`,this.uploadForm)
                    .then(({data})=>{
                        this.uploadFlag=false;
                        iview.Message.success(data.msg);
                        this.getUserList();
                    })
            }


            }





    })
</script>
</html>
